<!DOCTYPE html>
<html lang="en">
<link rel="shortcut icon" href="favicon.ico">
<link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
<link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
<link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
<link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
<link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body style="height: 450px;width: 800px;">
<div>
    <div id="choose_image" style="width: 100%;height: 100%;">
        <form id="imageForm" method="post" style="position: absolute;">
            <div style="position: relative;">
                <input id="imgSelect" type="file"
                       style="position: absolute;float: left; z-index: 10; opacity: 0;width: 100px; height: 100px;"
                       onchange="changePic(this)" accept="image/jpg,image/jpeg,image/png,image/PNG">

                <img id="imgPreview" onclick="$('#imgSelect').click();" src="${ctx!}/assets/img/empty.png" title="上传图片"
                     style="display: block;margin: 0 auto;max-height: 450px;max-width: 800px;object-fit: fill">
                <span id="txt"
                      style="font-size: 16px;color: #2861BB;font-family: 微软雅黑;font-weight: 700;margin: 20px auto;margin-left: 280px;display: block">暂无内容,点击上传</span>
            </div>
        </form>
        <button style="color: white;padding:5px 10px;border-radius:3px;border: none;background:#2591F4; position: relative;margin-top: 350px;margin-left: 300px;font-size: 18px;"
                onclick="uploadImage()">确认上传
        </button>
    </div>
</div>

</body>

<script>
    $(function () {
        if ($("#imgPreview").attr("src") == "${ctx!}/assets/img/empty.png") {
            $("#imgPreview").css({
                marginTop: "50px",
                marginLeft: "210px"
            })
        }
    })

    /*切换或者选择图片调用*/
    function changePic() {
        var reads = new FileReader();
        var f = document.getElementById('imgSelect').files[0];
        reads.readAsDataURL(f);
        reads.onload = function (e) {
            document.getElementById('imgPreview').src = this.result;
        };
        if (this.result != "${ctx!}/assets/img/empty.png") {
            $("#imgPreview").css({
                marginTop: "0px",
                marginLeft: "0px"
            })
            $("#txt").remove()
        }
    }

    function uploadImage() {
        var imageSelect = $("#imgSelect")
        if (imageSelect.val() == null || imageSelect.val().trim() == '') {
            layer.msg("请先选择保养流程图");
            return;
        }
        var file = document.getElementById('imgSelect').files[0]
        var data = new FormData()
        data.append("file", file)
        $.ajax({
            type: "POST",
            url: '${ctx!}/web/project/maintain/upload_maintain_image',
            data: data,
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            processData: false, // 告诉jQuery不要去处理发送的数据
            success: function (data) {
                var data = eval('(' + data + ')')
                if (data.success) {
                    layer.msg("上传成功", {time: 2000})
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index);
                } else {
                    layer.msg("上传失败")
                }


            }
        });
    }
</script>
</html>

